<template>
  <div class="myDiv">
    <div class="header">
      <el-button @click="gotoTargetPage" class="back">返回</el-button>
      <UserAcatar @transfer="change" />
    </div>
    <div class="work-detail">
      <div class="infoContainer">
        <div>
          <h1 style="color: #fdcb9e; font-size: 30px">
            {{ assignmentInfo.assignment_title }}
          </h1>
          <div style="display: flex; justify-content: space-between">
            <div>
              <div>
                <span style="margin-right: 12px">发布教师：{{ assignmentInfo.teacher_name }}</span>
                <span>发布时间：{{ assignmentInfo.publish_time }}</span>
              </div>
            </div>
            <div>
              <span v-if="status == 'review'" style="color: #fed71a; font-size: 19px">{{
                (
                  assignmentInfo.total_points *
                  (allScore / allProportion)
                ).toFixed(2)
              }}/</span><span style="color: #12aa9c; font-size: 19px">{{ assignmentInfo.total_points }}</span><span
                style="color: #12aa9c">分</span>
            </div>
          </div>
        </div>
      </div>
      <!-- <el-avatar :size="size" :src="'http://localhost:3000/image/getcourseimage/' + $route.query.row.avatar"></el-avatar> -->
      <div class="board-column">
        <el-collapse v-model="activeNames">
          <el-collapse-item name="单选题" v-if="list.singleChoiceQuestions && list.singleChoiceQuestions.length
            ">
            <template slot="title">
              <span style="font-size: 23px; font-weight: 700">单项选择题(共{{ list.singleChoiceQuestions.length }}题, 每题{{
                list.singleChoiceQuestions[0].proportion
              }}分, 共{{
  list.singleChoiceQuestions.length *
  list.singleChoiceQuestions[0].proportion
}}分)</span>
              <span v-if="status == 'review'" style="color: #134857; font-size: 20px; margin-left: 10px">总共得分:<span
                  style="color: #2486b9">{{ singleAllScore }}分</span></span>
            </template>
            <div v-for="(element, questionIndex) in list.singleChoiceQuestions"
              v-click-outside="{ handler: hideButtons, element: element }" :key="element.id" class="board-item">
              <!-- 单选题模板 -->
              <div v-if="element.questionType == '单选题'" class="item" :class="{ active: element.showAdd }"
                @click="element.showAdd = true">
                <div class="question" style="margin-bottom: 20px">
                  <div style="">
                    <span style="color: red; font-size: 20px; margin-right: ">*</span><span class="questionNumber">{{
                      questionIndex + 1 }}.</span>
                    <span class="questionContent" v-show="!element.editing"
                      @click="clickQuestion(element, questionIndex)">{{ element.question }}</span>
                  </div>
                  <div>
                    <span class="score" style="color: #ccc" v-show="!element.editScore"
                      @click="changeScore(element, questionIndex)">{{ element.proportion }} 分</span>
                  </div>
                </div>
                <div>
                  <div v-for="(optionElement, optionsIndex) in element.optionsList" :key="optionElement.id"
                    @mouseenter="optionElement.isHovered = false" @mouseleave="optionElement.isHovered = true"
                    class="board-item" style="diplay: flex; justify-content: space-between">
                    <div style="
                        display: flex;
                        align-items: center;
                        padding-left: 50px;
                        margin-bottom: 20px;
                      ">
                      <span style="margin-left: 8px" :class="{
                        studentAnswer:
                          element.studentAnswer == optionElement.content,
                      }">
                        {{ optionsItem[optionsIndex] }}.
                        {{ optionElement.content }}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="getScore" :class="{
                  correct: element.proportion == Number(element.score),
                  mistake: Number(element.score) == 0,
                }" v-if="status == 'review'">
                  <span>本题得分:<span style="font-weight: 700">{{
                    Number(element.score)
                  }}</span>分</span>
                </div>
                <el-collapse v-if="status !== 'unreviewed'" accordion>
                  <el-collapse-item>
                    <template slot="title">
                      <div style="display: flex; algin-items: center">
                        <span style="font-size: 18px; marign-left: 10px">正确答案</span><img style="margin-left: 10px"
                          src="../../../public/correct/correct.svg" alt="" />
                      </div>
                    </template>
                    <div>
                      {{
                        optionsItem[
                          element.optionsList.findIndex((item) => {
                            return item.content == element.answer;
                          })
                        ]
                      }}
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="多选题" v-if="list.multipleChoiceQuestions &&
            list.multipleChoiceQuestions.length
            ">
            <template slot="title">
              <span style="font-size: 23px; font-weight: 700">多项选择题(共{{ list.multipleChoiceQuestions.length }}题,
                每题{{ list.multipleChoiceQuestions[0].proportion }}分, 共{{
                  list.multipleChoiceQuestions.length *
                  list.multipleChoiceQuestions[0].proportion
                }}分)</span>
              <span v-if="status == 'review'" style="color: #134857; font-size: 20px; margin-left: 10px">总共得分:<span
                  style="color: #2486b9">{{ multipleAllScore }}分</span></span>
            </template>
            <!-- 多选题模板 -->
            <div v-for="(element, questionIndex) in list.multipleChoiceQuestions" :key="element.id" class="board-item">
              <!-- 多选题模板 -->
              <div v-if="element.questionType == '多选题'" class="item" :class="{ active: element.showAdd }"
                @click="element.showAdd = true">
                <div class="question" style="margin-bottom: 20px">
                  <div style="">
                    <span style="color: red; font-size: 20px; margin-right: ">*</span><span class="questionNumber">{{
                      questionIndex + 1 }}.</span>
                    <span class="questionContent" v-show="!element.editing"
                      @click="clickQuestion(element, questionIndex)">{{ element.question }}</span>
                  </div>
                  <div>
                    <span class="score" style="color: #ccc">{{ element.proportion }} 分</span>
                  </div>
                </div>
                <div>
                  <div v-for="(optionElement, optionsIndex) in element.optionsList" :key="optionElement.id"
                    @mouseenter="optionElement.isHovered = false" @mouseleave="optionElement.isHovered = true"
                    class="board-item" style="diplay: flex; justify-content: space-between">
                    <div style="
                        display: flex;
                        align-items: center;
                        padding-left: 50px;
                        margin-bottom: 20px;
                      ">
                      <span @click="
                        clickOptions(
                          optionElement,
                          questionIndex,
                          optionsIndex
                        )
                        " style="margin-left: 8px" :class="{
    studentAnswer: element.studentAnswer.includes(
      optionElement.content
    ),
  }">
                        {{ optionsItem[optionsIndex] }}.
                        {{ optionElement.content }}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="getScore" :class="{
                  correct: element.proportion == Number(element.score),
                  mistake: Number(element.score) == 0,
                  warning:
                    Number(element.score) != 0 &&
                    Number(element.score) < element.proportion,
                }" v-if="status == 'review'">
                  <span>本题得分:<span style="font-weight: 700">{{
                    Number(element.score)
                  }}</span>分</span>
                </div>
                <el-collapse accordion v-if="status !== 'unreviewed'">
                  <el-collapse-item>
                    <template slot="title">
                      <div style="display: flex; algin-items: center">
                        <span style="font-size: 18px; marign-left: 10px">正确答案</span><img style="margin-left: 10px"
                          src="../../../public/correct/correct.svg" alt="" />
                      </div>
                    </template>
                    <div>
                      {{
                        element.studentAnswer
                          .map((item) => {
                            return optionsItem[
                              element.optionsList.findIndex(
                                (i) => i.content == item
                              )
                            ];
                          })
                          .join("")
                      }}
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="简答题" v-if="list.shortAnswerQuestions && list.shortAnswerQuestions.length">
            <template slot="title">
              <span style="font-size: 23px; font-weight: 700">简答题(共{{ list.shortAnswerQuestions.length }}题, 每题{{
                list.shortAnswerQuestions[0].proportion
              }}分, 共{{
  list.shortAnswerQuestions.length *
  list.shortAnswerQuestions[0].proportion
}}分)</span>
              <span v-if="status == 'review'" style="color: #134857; font-size: 20px; margin-left: 10px">总共得分:<span
                  style="color: #2486b9">{{ shortAllScore }}分</span></span>
            </template>
            <div v-for="(element, questionIndex) in list.shortAnswerQuestions" :key="element.id" class="board-item">
              <!-- 简答题模板 -->
              <div v-if="element.questionType == '简答题'" class="item" :class="{ active: element.showAdd }"
                v-click-outside="{ handler: hideButtons, element: element }" @click="element.showAdd = true">
                <div class="question" style="margin-bottom: 20px">
                  <div>
                    <span style="color: red; font-size: 20px; margin-right: ">*</span><span class="questionNumber">{{
                      questionIndex + 1 }}.</span>
                    <span class="questionContent" v-show="!element.editing"
                      @click="clickQuestion(element, questionIndex)">{{ element.question }}</span>
                  </div>
                  <div>
                    <span class="score" style="color: #ccc">{{ element.proportion }} 分</span>
                  </div>
                </div>
                <div style="border: 1px solid #fdcb9e; min-height: 100px">
                  <div style="
                      padding: 10px;
                      background: #fdcb9e;
                      font-weight: 700;
                      font-size: 15px;
                      margin-bottom: 20px;
                    ">
                    答案：
                  </div>
                  <div style="padding: 0 20px">
                    {{ element.studentAnswer }}
                  </div>
                </div>
                <el-collapse accordion v-if="status !== 'unreviewed'">
                  <el-collapse-item>
                    <template slot="title">
                      <div style="display: flex; algin-items: center">
                        <span style="font-size: 18px; marign-left: 10px">正确答案</span><img style="margin-left: 10px"
                          src="../../../public/correct/correct.svg" alt="" />
                      </div>
                    </template>
                    <div>
                      {{ element.answer }}
                    </div>
                  </el-collapse-item>
                </el-collapse>
                <div class="getScore" :class="{
                  correct: element.proportion == Number(element.score),
                  mistake: Number(element.score) == 0,
                  warning:
                    Number(element.score) != 0 &&
                    Number(element.score) < element.proportion,
                }" v-if="status == 'review'">
                  <span>本题得分:<span style="font-weight: 700">{{
                    Number(element.score)
                  }}</span>分</span>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div v-if="status == 'unreviewed'" style="
          display: flex;
          width: 100%;
          justify-content: center;
          margin-bottom: 100px;
          margin-top: 30px;
        ">
        <el-button @click="editAssignment(assignmentInfo.assignment_id)" type="success">修改作业</el-button>
      </div>
    </div>
    <!-- 评论 -->
    <div v-if="status == 'review'" style="width: 100%;height: 100px;">
      <span style="
          margin-bottom: 20px;
          font-size: larger;
          font-weight: bold;
          display: block;
          border-bottom: 3px solid #cceabb;
          padding-bottom: 4px;
          width: 100px;
          text-align: center;
        ">
        作业评论
      </span>
      <div style="width: 90%; margin: 0 auto" v-if="(infoList ? infoList : []).length != 0">
        <el-card v-for="item in infoList" :key="item.sender">
          <el-popover placement="top" width="300" trigger="hover">
            <div style="display: flex; justify-content: space-between">
              <!-- 头像 -->
              <div style="
                  width: 80px;
                  height: 80px;
                  overflow: hidden;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-radius: 5px;
                ">
                <div class="avatarn" v-if="!item.avatar" style="
                    background-color: #ccc;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  ">
                  <i class="el-icon-picture-outline"></i>
                </div>
                <el-image v-else style="height: 80px" :src="item.avatar" />
              </div>
              <div style="width: 200px">
                <h4>{{ item.user_name }}</h4>
                <p>{{ item.signature }}</p>
              </div>
            </div>

            <div slot="reference" style="
                width: 80px;
                height: 80px;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 5px;
              ">
              <div class="avatarn" v-if="!item.avatar" style="
                  background-color: #ccc;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                ">
                <i class="el-icon-picture-outline"></i>
              </div>
              <el-image v-else style="height: 80px" :src="item.avatar" />
            </div>
          </el-popover>

          <el-timeline style="margin-top: 20px">
            <el-timeline-item v-for="o in messagesByPerson[item.sender]" :key="o.message_id" :timestamp="o.create_time"
              placement="top">
              <p style="line-height: 2" v-if="userInfo.user_id != o.sender">
                <span class="sender"> @{{ o.user_name }} </span>
              </p>
              <p style="line-height: 2" v-html="o.content"></p>

              <p style="line-height: 2">
                {{ o.update_time }}
                <span style="cursor: pointer; margin-left: 10px" class="reply" @click="reply(o)"
                  v-if="userInfo.user_id != o.sender">
                  <i class="el-icon-chat-round"></i> 回复
                </span>
                <span style="cursor: pointer; margin-left: 10px" @click="upvote(item, o)"
                  v-if="userInfo.user_id != o.sender">
                  <span class="favour" v-if="o.isliked" style="color: #65cce9">
                    <i class="iconfont icon-dianzan"></i>
                  </span>
                  <span class="favour" v-else>
                    <i class="iconfont icon-dianzan"></i>
                  </span>
                  {{ o.num }}
                </span>
              </p>
              <div style="margin-top: 10px; width: 90%; margin: 0 auto" v-if="o.isreply">
                <Tinymce ref="editor" v-model="content" :height="40" :menubar="''" @critic="Critic" />
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </div>
      <div v-else
        style="width: 90%;margin-top: 60px;color: #ccc;display: flex;align-items: center;justify-content: center;">
        暂无评论
      </div>
    </div>
  </div>
</template>

<script>
import UserAcatar from "@/components/UserAcatar.vue"; //引入组件
import Tinymce from "@/components/Tinymce";
import "@/assets/icon/iconfont.css";
export default {
  name: "LookWork",
  components: {
    UserAcatar,
    Tinymce,
  },
  computed: {
    singleAllScore() {
      let score = 0;
      this.list.singleChoiceQuestions.forEach((element) => {
        score += element.score;
      });
      return score;
    },
    allScore() {
      let score = 0;
      this.questionList.forEach((item) => {
        score += item.score;
      });
      return score;
    },
    allProportion() {
      let score = 0;
      this.questionList.forEach((item) => {
        score += item.proportion;
      });
      return score;
    },
    multipleAllScore() {
      let score = 0;
      this.list.multipleChoiceQuestions.forEach((element) => {
        score += element.score;
      });
      return score;
    },
    shortAllScore() {
      let score = 0;
      this.list.shortAnswerQuestions.forEach((element) => {
        score += element.score;
      });
      return score;
    },
  },
  data() {
    return {
      userInfo: {},
      infoList: null,
      messagesByPerson: null,
      finishedList: [
        {
          studentId: 1,
          studentName: "RICK",
        },
        {
          studentId: 2,
          studentName: "SOY",
        },
      ],
      assignmentInfo: {},
      questionList: [],
      list: {
        singleChoiceQuestions: [],
        multipleChoiceQuestions: [],
        shortAnswerQuestions: [],
      },
      activeNames: ["单选题", "多选题", "简答题"],
      optionsItem: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      content: "",
      dialogVisible: false,
    };
  },
  methods: {
    gotoTargetPage() {
      this.$router.go(-1);
    },
    // 将标准时间转换为YYYY-MM-DD HH:MM:SS类型的
    formTime(time) {
      let newtime = new Date(time);
      // console.log(new Date(time), "要进行转换的时间");
      const year = newtime.getFullYear();
      const month = String(newtime.getMonth() + 1).padStart(2, "0");
      const day = String(newtime.getDate()).padStart(2, "0");
      const hours = String(newtime.getHours()).padStart(2, "0");
      const minutes = String(newtime.getMinutes()).padStart(2, "0");
      const seconds = String(newtime.getSeconds()).padStart(2, "0");

      const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      return formattedDate;
    },
    // 将头像组件中的路由再传递给homeview
    change(msg) {
      this.$emit("transfer", msg);
    },
    // 回复
    async reply(r) {
      console.log(r);
      r.isreply = !r.isreply;
      this.r = r;
    },
    // 评论
    async Critic(msg) {
      console.log(msg);
      if (msg) {
        console.log(this.content);
        if (this.content != "") {
          let obj = {
            sender: this.userInfo.user_id,
            recipient: this.r.sender,
            content: this.content,
            type: "#",
            r_msg_id: this.r.message_id,
            assignment_id: this.$route.query.assignment_id,
          };
          let res = await this.$axios.post("/message/reply", obj);
          console.log(res);
          if (res.code == 200) {
            this.content = "";
            this.r.isreply = false;
            await this.getInfo()
          }
        }
      }
    },
    // 获取通知
    async getInfo() {
      let res = await this.$axios.post("/correct/getminfo", {
        assignment_id: this.$route.query.assignment_id,
      });
      console.log(res);
      if (res.code == 200) {
        // this.infoList = res.data.map(item => {
        //   return { ...item, create_time: this.formTime(item.create_time), update_time: this.formTime(item.update_time), avatar: item.avatar ? `http://localhost:3000/image/getavatar/${encodeURIComponent(item.avatar)}` : item.avatar }
        // })

        const List = res.data.map((item) => {
          return {
            ...item,
            create_time: this.formTime(item.create_time),
            update_time: this.formTime(item.update_time),
            avatar: item.avatar
              ? `http://localhost:3000/image/getavatar/${encodeURIComponent(
                item.avatar
              )}`
              : item.avatar,
          };
        });
        const senders = List.filter(
          (item) => item.sender != this.userInfo.user_id
        );
        const mineL = List.filter(
          (item) => item.sender == this.userInfo.user_id
        );
        console.log(mineL);

        const messagesByPerson = senders.reduce(function (result, message) {
          if (!result[message.sender]) {
            result[message.sender] = [];
          }
          result[message.sender].push(message);
          return result;
        }, {});
        console.log(messagesByPerson);

        this.infoList = Object.keys(messagesByPerson).map((item) => {
          return {
            sender: item,
            avatar: senders.filter((r) => r.sender == item)[0].avatar,
            user_name: senders.filter((r) => r.sender == item)[0].user_name,
            signature: senders.filter((r) => r.sender == item)[0].signature,
          };
        });
        console.log(this.infoList);

        Object.keys(messagesByPerson).forEach((item) => {
          messagesByPerson[item] = [
            ...messagesByPerson[item].map((r) => {
              return { ...r, isreply: false };
            }),
            ...mineL.filter((s) => s.recipient == item),
          ].sort(function (a, b) {
            return new Date(a.create_time) - new Date(b.create_time);
          });
        });
        console.log(messagesByPerson);
        this.messagesByPerson = messagesByPerson;
      }
    },
    // 点赞
    async upvote(s, r) {
      console.log(s);
      console.log(r);
      let obj = {
        user_id: r.sender,
        message_id: r.message_id,
        up_user_id: this.userInfo.user_id,
      };
      let res = await this.$axios.post("/message/upvote", obj);
      // console.log(res);
      if (res.code == 200) {
        r.num += 1;
        r.isliked = true;
      }
      if (res.code == 201) {
        r.num -= 1;
        r.isliked = false;
      }
    },
    quitBtn() {
      this.$router.push("/home/submitjob");
    },
    async getAssingmentInfo() {
      console.log(this.$route.query.workid);
      let res = await this.$axios.post("/correct/getAssignmentInfo", {
        assignmentId: this.$route.query.assignment_id,
        studentAssignmentId: this.$route.query.student_assignment_id,
      });
      console.log(res);
      this.assignmentInfo = res.assignmentInfo;
      console.log(this.assignmentInfo);
      this.questionList = res.assignmentInfo.questionList.map((item) => {
        let obj = {};
        console.log(item, "item");
        if (item.question_type == "简答题") {
          obj.answer = item.correct_answer;
          obj.studentAnswer = item.student_answer;
          obj.question = item.essayQuestion;
        } else {
          obj.answer = JSON.parse(item.correct_answer);
          obj.studentAnswer = JSON.parse(item.student_answer);
          obj.optionsList = JSON.parse(item.options_list);
          obj.question = item.choice_question;
        }
        obj.question_id = item.question_id;
        obj.id = String(Math.random()).slice(-5) + String(Date.now()).slice(-5);
        obj.editing = false;
        obj.showAdd = false;
        obj.questionType = item.question_type;
        obj.proportion = item.proportion;
        obj.score = item.score;
        return obj;
      });
      let singleChoiceQuestions;
      let multipleChoiceQuestions;
      let shortAnswerQuestions;
      singleChoiceQuestions = this.questionList.filter((item) => {
        if (item.questionType === "单选题") {
          return item;
        }
      });
      multipleChoiceQuestions = this.questionList.filter((item) => {
        if (item.questionType === "多选题") {
          return item;
        }
      });
      shortAnswerQuestions = this.questionList.filter((item) => {
        if (item.questionType === "简答题") {
          return item;
        }
      });
      this.list.singleChoiceQuestions = singleChoiceQuestions;
      this.list.multipleChoiceQuestions = multipleChoiceQuestions;
      this.list.shortAnswerQuestions = shortAnswerQuestions;
      console.log(this.list);
      console.log(this.questionList);
    },
    hideButtons(element) {
      element.showAdd = false;
    },
    // 修改作业
    editAssignment(id) {
      console.log(id);
      console.log(this.$route.query.student_assignment_id);
      this.$router.push({
        name: "SubmitWork",
        query: {
          handle: "edit",
          workid: id,
          student_assignment_id: this.$route.query.student_assignment_id
        },
      });
    },
  },
  async mounted() {
    this.status = this.$route.query.status;
    console.log(this.status);
    console.log(this.$route.query);
    this.userInfo = {
      ...JSON.parse(JSON.stringify(this.$store.state.user_info)),
    };
    await this.getAssingmentInfo();
    console.log(this.list);
    if (this.$route.query.status == 'review') {
      await this.getInfo();
    }
  },
  // 自定义指令，判断点击位置是否在盒子内部
  directives: {
    clickOutside: {
      bind(el, binding, vnode) {
        el.clickOutsideEvent = function (event) {
          if (!(el === event.target || el.contains(event.target))) {
            binding.value.handler(binding.value.element);
          }
        };
        document.body.addEventListener("mousedown", el.clickOutsideEvent);
      },
      unbind(el) {
        document.body.removeEventListener("mousedown", el.clickOutsideEvent);
      },
    },
  },
};
</script>
<style scoped lang="less">
.infoContainer {
  margin: auto;
  width: 90%;
  margin-bottom: 30px;
  // display: flex;
}

.submitContainer {
  // width: 80%;
  // margin: auto;
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
  margin-top: 30px;
}

.my-label {
  background: #e1f3d8;
}

.my-content {
  background: #fde2e2;
}

.getScore {
  // margin-left: 50px;
  border: 1px #ccc solid;
  padding: 15px;
}

.correct {
  background: #cceabb;
}

.mistake {
  background: #f56c6c;
}

.warning {
  background: #e6a23c;
}

.studentAnswer {
  background: #cceabb;
}

.item {
  display: flex;
  background: white;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1),
    -1px 1px 3px 0px rgba(0, 0, 0, 0.1), -3px 5px 6px 0px rgba(0, 0, 0, 0.09),
    -8px 10px 8px 0px rgba(0, 0, 0, 0.05),
    -13px 18px 9px 0px rgba(0, 0, 0, 0.01), -21px 28px 10px 0px rgba(0, 0, 0, 0);
  padding: 30px 50px;
  width: 80%;
  margin: 20px auto;
  flex-direction: column;
  border: 1px solid transparent;
  transition: border-color 0.3s;
  border-radius: 3px;
}

.active {
  border: 2px #409eff solid;
}

.questionContent {
  padding: 5px;
  display: inline-block;
  width: 300px;
  // display: block;
}

.question {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question input {
  outline: none;
  border: none;
  padding: 5px;
  width: 300px;
  background: #f9f9fc;

  white-space: pre-wrap;
}

.questionNumber {
  margin-right: 30px;
}

.board-column {
  min-width: 300px;
  // max-width: 80%;
  width: 80%;
  margin: auto;
  min-height: 100px;
  height: auto;
  overflow: hidden;
  // background: #f6f7f9;
  border-radius: 3px;

  .board-column-header {
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    background: #e6a23c;
    color: #fff;
    border-radius: 3px 3px 0 0;
  }

  .board-column-content {
    height: auto;
    overflow: hidden;
    border: 10px solid transparent;
    min-height: 60px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;

    .board-item {
      cursor: pointer;
      width: 100%;
      height: auto;
      margin: 5px 0;
      background-color: #fff;
      text-align: left;
      // line-height: 54px;
      padding: 30px 30px;
      box-sizing: border-box;
      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
      display: flex;
    }
  }
}

.header {
  width: 100%;
  height: 80px;
  border-bottom: 2px solid #bbb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatarn {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sender {
  font-weight: bold;
  cursor: pointer;
}

.sender:hover,
.reply:hover,
.favour:hover {
  color: #65cce9;
}
</style>